<template>
  <div class="content">
    <div class="toolbox-title">
      <div style="font-family: '微软雅黑'; font-size: 18px; font-weight: bold"
        >待办事项
      </div>
    </div>
    <div class="list">
      <div class="list-item" v-for="(item, index) in data" :key="index">
        <div
          class="cycle"
          :class="item.state === 1 ? 'blueColor-cycle' : 'greenColor-cycle'"
        >
        </div>
        <a-space style="margin-left: 50px" direction="vertical" fill :size="2"
          ><a-space
            ><div
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                white-space: nowrap;
              "
              >{{ item.content }}</div
            ><div class="modelItem">{{ item.module }}</div></a-space
          ><div style="color: #c9c9c9"
            >{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}
          </div></a-space
        >
      </div>
    </div>
    <!-- <div> </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import dayjs from 'dayjs';

  const data = [
    {
      key: 1,
      content: '符小姐办公采购申请',
      depa: '销售部门',
      state: 1,
      module: '采购管理',
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '生产任务单-RW20230814需要备货',
      depa: '销售部门',
      module: '生产管理',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '生产任务单-RW20230814已备货，请去领料。',
      depa: '销售部门',
      module: '采购管理',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '生产任务单-RW20230814已备货，请去领料。',
      depa: '销售部门',
      module: '销售管理',
      state: 1,
      time: new Date().toJSON(),
    },
  ];
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 180px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    .toolbox {
      &-title {
        width: 100%;
        height: 20%;
        padding: 15px;
      }
    }
    .list {
      width: 100%;
      height: 80%;
      padding: 15px;
      overflow: auto;
      // display: flex;
      // justify-content: space-between;
      // overflow-x: hidden;
      // .use-state {
      //   display: flex;
      //   justify-content: center;
      //   text-align: center;

      &-item {
        margin-bottom: 10px;
        width: 100%;
        height: 26%;
        display: flex;
        // justify-content: space-around;
        font-size: 13px;
        // white-space: nowrap;
      }
      .modelItem {
        width: 68px;
        height: 22px;
        background-color: rgba(226, 237, 254, 1);
        border-radius: 2px;
        text-align: center;
        line-height: 22px;
        color: rgb(67, 137, 251);
        font-size: 13px;
      }
    }
  }

  .cycle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    content: '';
    display: inline-block;
    top: 3px;
    right: 10px;
  }

  .blueColor-cycle {
    background-color: rgb(228, 228, 228);
  }

  // 已通过

  .greenColor-cycle {
    background-color: #31c273;
  }
</style>
